"
"
The document below was recreated from the source pdf at this link. It was coded manually and meets XHTML standards as can be validated through the World Wide Web Consortium's page validator.
A text version of the html document can be viewed at this link and copy and pasted into the validator
| Hometown Map (No Popup) | Hometown Map with Popup |
|---|---|
This lesson helped clarify and solidify several concepts from previous lessons and classes for me, such as splitting code into separate documents (i.e., html, CSS, JavaScript), programming with JavaScript, and navigating API documentation. This was also my first introduction to the ArcGIS Maps SDK for JavaScript and Code Pen both of which were very interesting to explore.
Separating code into different documents based on language or function is something I know to be very useful and important for improving readability and utility. However, I struggled with this in lesson 3 as I had not worked with CSS before so I spent more time exploring its application to styling html than creating well-organized and readable code. This lesson helped reinforce the importance of well-organized code and how to accomplish that with the introduction of Code Pen and the simple sample code we worked. These examples and tool allowed me to more easily follow how the code was organized, what its function was, and how it was being referenced in other parts of the app (in this case how the main html referenced the CSS and JavaScript code).
My programming language studies began with a class on Java many years ago. However, most recently I’ve been focused mainly in python which has a very different style. It was nice to revisit a language and style of coding that I haven’t worked with for a while. However, the ArcGIS Maps SDK for JavaScript was completely new to me so one of the most valuable things I got out of this lesson was how to navigate the API Reference documentation for the SDK. Exploring how the documentation is organized and how you can discover a widget’s/function’s properties, methods and inheritance as well other potential subclasses of that item will be invaluable to me moving forward in learning how to develop more complex applications with the SDK.
The thing I struggled with most in this lesson was modifying the CSS for this page so that text would be visible without having to scroll. I spent close to an hour fiddling with ways that I thought should work when I realized that my browser had cached the original main.css and was therefore not applying the changes I had been making. This was a good lesson to me that it’s important to pay attention to what environment you are working in, as I was modifying the code from directly in the file manager of my 000WebHost page instead of from my local machine or a tool like Code Pen. If I had been working in either of the latter options I would have saved myself a bit of a headache as my changes had been correct.
See the Pen Lesson 6 Assignment (Geog 863) by Kevin Price (@kprice15) on CodePen.
The map I created for this assignment utilizes an AGOL feature layer depictng Critical Biodiversity Areas (CBAs) in Capetown, South Africa. It has been displayed on a 3D Scene using a class breaks renderer that classifies based on area in hectares. The map also implements a simple legend, popup template, and home button to display additional information and increase user-friendliness.
I really enjoyed this lesson for many reasons. First, I found learning how to implement our own symbology utilizing renderers and symbol classes to be incredibly useful. It is something that I have struggled with in the past and this was the first time I was able to implement a class breaks renderer the way I intended successfully. Having the power to manipulate symbology also allows for personal touches to the maps we make which is something I love about GIS. Investigating how to utilize the developer tools in your browser to assist in the development of maps was also very valuable. I used this technique to determine the ballpark values I used for latitude, longitude, z height, and tilt then adjusted them slightly in my final product so that the map was in full view with my legend as well. The rest of the lesson was full of great information as well. Particularly all the variety in 2D and 3D symbols/how to implement them and all the sorts of customization that can be created with popups. I would have liked to have more time to implement media in my popups and/or 3D symbols but I will find time to explore this on my own later.
The biggest difficulty I ran into during the assignment was with implementing the renderer on my desired layer. I initially tried to stylize the layer in AGOL then ArcGIS Pro to get my desired result then transfer those values to my JavaScript code in CodePen. However, when I attempted to symbolize by area neither of these options would display the layer correctly. I moved forward in trying to implement the renderer as I knew it should work theoretically and luckily with the help of the lesson examples I was able to get it to work. This demonstrated to me that there can be additional power in knowing how to code even things as simple as symbology, as in this scenario it allowed me to produce something that neither AGOL nor ArcPro allowed me to.
See the Pen Lesson 7: Hurricane Map by Kevin Price (@kprice15) on CodePen.
The map above utilizes a historical hurricane tracks feature service and the year input from the browser prompt box to display hurricane tracks from that year. The tracks are colored coded from light to dark based on the maximum sustained wind speed field and are categorezied according to the Saffir-Simpson Hurricane Wind Scale.
This was the first lesson I found myself having to do some heavier problem solving with the ArcGIS Maps SDK as I had trouble getting certain aspects of the app to behave how I wanted, I will explain those later in the challenges section. However, this is a part of programming that I really enjoy. There are an incredible amount of possible solutions to a given problem and each has its benefits. Finally, having the opportunity to tackle some rather frustrating issues and the confidence to navigate the API Reference documentation and other online resources to find solutions was refreshing. Ultimately, my issues arose from missing some key insturctions and not using the correct tools for the job in a couple of situations as I will explain below.
I faced two main challenges in programming this app. The first was figuring out how to take a user input and utilize it in a query to display tracks from the desired year and the second was figuring out how to display the tracks with my desired symbology after the query. Both of my challenges had simple solutions but the latter caused me much more trouble than the former. In the end the both had simple solutions that could have been found in the lesson material or the assignment instructions but the journey was enlightening.
My issues resolving the user input problem began because I was attempting to utilize a Search Widget to pass a user input. However, I was unsuccessful in accomplishing this but discovered a few code examples that utilized buttons and text boxes. I began to try coding a solution using those techniques but it quickly became more complex then I expected and I knew it could not be the intended solution for this assignment. Therefore, I went back to the drawing board and discovered the JS prompt() on my own before realizing that it was suggested in the first few lines of the assignment. This felt like a bit of time wasted but I did get to explore some concepts that I know will be explained in lesson 8 so it wasn't all lost.
My second issue with displaying the hurricane tracks with proper symbology arose from implementing the queryFeatures() method as described in section 7.2.4 of the lesson instead of the definitionsExpression property of featureLayers as described in in 7.2.1. This unfortunately (or fortunately in a certain light) sent me on a path of researching graphics deeper and how they could be added back to a new featureLayer after query which does seem possible but was beyond my limitations at the moment. It was not until I decided to take the lesson quiz that I was reminded about the definitionsExpression property. After that I was able to solve my issues easily as I had already implemented a classBreaksRenderer on the original Hurricane featureLayer.